<template>
  <div>
    <div class='instructions'>
      <div>说明： 目前支持学科和关键字条件筛选</div>
      <el-button type='success' @click='onChangeNewView'><i class='el-icon-edit'></i>新增试题</el-button>
    </div>
    <el-form :model='questionFromData' ref="searchRef" :rules="rules">
      <el-row>
        <el-col :span='6'>
          <el-form-item label='学科' label-width='100px'>
            <el-select v-model='questionFromData.subject' placeholder='请选择' @change='onChangeSubject'
                       style='width:140%'>
              <el-option v-for='(subject, i) in subjectList.data' :key='i' :label='subject.label'
                         :value='subject.value' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label='二级目录' label-width='100px'>
            <el-select v-model='questionFromData.simple' collapse-tags style='width:140%' placeholder='请选择'>
              <el-option v-for='(simple, i) in simpleList.data' :key='i' :label='simple.label' :value='simple.value' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label='标签' label-width='100px'>
            <el-select v-model='questionFromData.tags' collapse-tags style='width:140%' placeholder='请选择'>
              <el-option v-for='(tag, i) in tagList.data' :key='i' :label='tag.label' :value='tag.value' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label='关键字' label-width='100px'>
            <el-input v-model='questionFromData.shortName' style='width:150%' placeholder='根据题干搜索'></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='6'>
          <el-form-item label='试题类型' label-width='100px'>
            <el-select v-model='questionFromData.questionType' placeholder='请选择' @change='companyCity'
                       style='width:140%'>
              <el-option v-for='(questionType, i) in questionTypes' :key='i' :label='questionType.name'
                         :value='questionType.value' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label='难度' label-width='100px'>
            <el-select v-model='questionFromData.difficulty' collapse-tags style='width:140%' placeholder='请选择'>
              <el-option v-for='(difficulty, i) in difficultys' :key='i' :label='difficulty.name'
                         :value='difficulty.value' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label='方向' label-width='100px'>
            <el-select v-model='questionFromData.direction' collapse-tags style='width:140%' placeholder='请选择'>
              <el-option v-for='(direction, i) in directions' :key='i' :label='direction' :value='direction' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label='录入人' label-width='100px'>
            <el-select v-model='questionFromData.creator' collapse-tags style='width:140%' placeholder='请选择'>
              <el-option v-for='(item, i) in creator' :key='i' :label='item' :value='item' />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='6'>
          <el-form-item label='题目备注' label-width='100px'>
            <el-input v-model='questionFromData.shortName' style='width:150%' />
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label='企业简称' label-width='100px'>
            <el-input v-model='questionFromData.shortName' style='width:150%' />
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item label='城市' label-width='100px'>
            <el-select v-model='questionFromData.province' placeholder='请选择' @change='companyCity' style='width:47%'>
              <el-option v-for='(province, i) in provinces' :key='i' :label='province' :value='province' />
            </el-select>
            <el-select v-model='questionFromData.city' collapse-tags style='margin-left:8px; width:47% '
                       placeholder='请选择'>
              <el-option v-for='(city, i) in companyCitys' :key='i' :label='city' :value='city' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='6'>
          <el-form-item class='btn' label-width='250px'>
            <el-button @click='clearStatus'>清除</el-button>
            <el-button type='primary' @click='onSearch'>搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { citys, provinces } from '@/api/hmmm/citys'
import { mapActions, mapState } from 'vuex'
import { direction } from '@/api/hmmm/constants'

export default {
  name: 'searchView',
  props: {
  },
  data () {
    return {
      updateTableFn: null,
      questionFromData: {
        addData: '', // 录入时间
        catalog: '', // 目录
        city: '',
        creator: '', // 录入人
        difficulty: '', // 难度
        subject: '', // 学科
        simple: '',
        number: '', // 试题编号
        question: '', // 题干
        questionType: '', // 题型
        tags: '', // 标签
        direction: '', // 方向
        province: '',
        options: [
          {
            isRight: 0,
            code: 'A',
            title: '',
            img: ''
          },
          {
            isRight: 0,
            code: 'B',
            title: '',
            img: ''
          },
          {
            isRight: 0,
            code: 'C',
            title: '',
            img: ''
          },
          {
            isRight: 0,
            code: 'D',
            title: '',
            img: ''
          }
        ],
        optionCode: '',
        optionCodes: []
      },
      companyCitys: [],
      questionTypes: [
        {
          name: '单选',
          value: 1
        },
        {
          name: '多选',
          value: 2
        },
        {
          name: '简答',
          value: 3
        }
      ],
      difficultys: [
        {
          name: '简单',
          value: 1
        },
        {
          name: '一般',
          value: 2
        },
        {
          name: '困难',
          value: 3
        }
      ],
      directions: direction,
      creator: ['超级管理员'],
      provinces: provinces(),
      citys: []
    }
  },
  computed: {
    ...mapState('subjects', ['subjectList', 'simpleList', 'tagList'])
  },
  methods: {
    ...mapActions('subjects', ['updateSubjectList', 'updateSimpleList', 'updateTagList']),
    onSearch () {
      this.updateTableFn({
        subjectID: this.questionFromData.subject
      })
    },
    onChangeSubject () {
      const data = this.questionFromData.subject
      this.updateSimpleList({
        subjectID: data
      })
      this.updateTagList({
        subjectID: data
      })
    },
    companyCity () {
      const data = citys(this.questionFromData.province)
      this.companyCitys = data
      this.companyFromData.city = this.companyCitys[0]
    },
    clearStatus () {
      this.questionFromData = {}
    },
    onChangeNewView () {
      this.$router.push('new')
    },
    componentFn (fn) {
      this.updateTableFn = fn
    }
  },
  created () {
    this.updateSubjectList()
    this.updateTagList()
  }
}
</script>

<style scoped lang='scss'>
.instructions {
  display: flex;
  justify-content: space-between;
  padding: 4px 20px 20px 8px;

  div {
    color: #ffc5d5;
    font-size: 12px;
  }
}

.el-form-item {
  display: inline-block !important;
}

.el-form-item__label {
  display: none;
  width: 0px !important;

}
</style>
